import { FC } from 'react'
import styles from './Port.module.scss'
import { motion } from 'framer-motion'
import { motionEasing } from '@/config'
import { useColorVar, useStyles } from '@/hooks/styles'

interface IPort {
  circleColor: string
  borderColor: string
}

export const Port: FC<IPort> = ({ circleColor, borderColor }) => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  return (
    <motion.div
      id={'port-circle'}
      {...styleClass(['port'], {
        background: circleColor,
        borderColor: borderColor,
      })}
      initial={{ scale: 1 }}
      whileHover={{ scale: 1.1 }}
      transition={{ ...motionEasing }}
    ></motion.div>
  )
}
